<template>
  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse">
    <template v-for="group in menuList">
      <el-submenu v-if="group.children && group.children.length > 0" :key="group.id" :index="group.id">
        <template slot="title">
          <i :class="group.icon"></i>
          <span slot="title">{{group.name}}</span>
        </template>
        <el-menu-item v-for="(menu,index) in group.children" :key="menu.id" :index="menu.url" @click="sendParams(menu)">
          <i class="icon iconfont icon-pointer" style="vertical-align: baseline;" />
          {{menu.name}}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :key="group.id" :index="group.url" @click="sendParams_2(group)">
        <i :class="group.icon"></i>
        <span slot="title">{{group.name}}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
  import eventBus from '@/assets/js/eventBus.js'

  export default {
    data() {
      return {
        isCollapse: false, //菜單显示or隐藏
        menuList: [{
            "id": "1",
            "pid": "0",
            "name": "工作台",
            "url": "/me_index",
            "icon": "el-icon-s-platform",
            "children": []
          },
          {
            "id": "2",
            "pid": "0",
            "name": "教务管理",
            "icon": "el-icon-s-opportunity",
            "children": [{
                "id": "21",
                "pid": "2",
                "name": "学员中心",
                "url": "/educate/student"
              },
              {
                "id": "22",
                "pid": "2",
                "name": "班级管理",
                "url": "/educate/class"
              },
              {
                "id": "23",
                "pid": "2",
                "name": "课程管理",
                "url": "/educate/course"
              },
              {
                "id": "24",
                "pid": "2",
                "name": "课表管理",
                "url": "/educate/table"
              }
            ]
          },
          {
            "id": "3",
            "pid": "0",
            "name": "系统设置",
            "icon": "el-icon-setting",
            "children": [{
                "id": "31",
                "pid": "3",
                "name": "基础信息",
                "url": "/setting/base"
              },
              {
                "id": "32",
                "pid": "3",
                "name": "职员管理",
                "url": "/setting/user"
              },
              {
                "id": "33",
                "pid": "3",
                "name": "岗位管理",
                "url": "/setting/role"
              }
            ]
          },
        ]
      }
    },
    created() {
      this.isshow();
    },
    methods: {
      isshow() {
        eventBus.$on("show", (message) => { //这里最好用箭头函数，不然this指向有问题
          this.isCollapse = message
          this.isCollapse = !this.isCollapse
        })
      },
      sendParams(e) {
        console.log(e.name)
        if(e.name == '学员中心'){
           this.$router.push({path:'/member/me_student'},onComplete => {},onAbort => {})
        }else if(e.name == '班级管理'){
          this.$router.push({path:'/member/me_class'},onComplete => {},onAbort => {})
        }else if(e.name == '课程管理'){
          this.$router.push({path:'/member/course_manage'},onComplete => {},onAbort => {})
        }else{
          this.$router.push({path:'/member/course_manage'},onComplete => {},onAbort => {})
        }
      },
      sendParams_2(e){
        console.log(e.name)
        if(e.name == '工作台'){
           this.$router.push({path:'/member/me_work'},onComplete => {},onAbort => {})
        }
      }
    }
  };
</script>
<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  /* 设置了默认左边框为白色 */
  .el-menu-item {
    border-left: #fff solid -6px;
  }

  /* 设置鼠标悬停时el-menu-item的样式 */
  .el-menu-item:hover {
    border-left: #38B2FF solid -6px !important;
    background-color: #E2EFF9 !important;
    color: #38B2FF !important;

    /* less语法，实现鼠标悬停时icon变色 */
    i {
      color: #38B2FF;
    }
  }

  /* 设置选中el-menu-item时的样式 */
  .el-menu-item.is-active {
    border-left: #38B2FF solid 6px !important;
    background-color: #E2EFF9 !important;
    color: #38B2FF !important;
  }

  .router-link-active {
    text-decoration: none;
    color: #333;
  }

  a:link {
    text-decoration: none
  }
</style>
